<!--
  @author: 善良的YWJ
  @Created by shanliangdeYWJ on 2020/09/18 12:04:30
  @file: title.vue
  @description:
  ==================
  每页上的标题
  ==================
  @link [Github](https://github.com/shanliangdeYWJ)
-->

<template>
  <div class="title-box" :class="[...className]">
    <router-link v-if="link" :to="link">
      <div class="title-content">{{titleText}}</div>
    </router-link>
    <div v-else class="title-content">{{titleText}}</div>
    <p v-if="titleContent">{{titleContent}}</p>
  </div>
</template>

<script>
export default {
  name: 'Title',
  props: {
    titleText: { type: String, require: true },
    titleContent: { type: String },
    className: { type: Array },
    link: { type: String }
  }
};
</script>

<style lang='scss' scoped>
.title-box {
  margin: 0 auto;
  text-align: center;
  border: 1px solid #fafafa;
  padding: 0;
  p {
    width: 50%;
    margin: 0 auto;
  }
}
.title-content {
  display: inline-block;
  font-size: 40px;
  border-top: 3px solid #999999;
  border-bottom: 3px solid #999999;
  margin: 10px;
}
</style>
